/*
    move    运动函数
        @param  object      element     要执行运动的标签对象
        @param  object      styleObj    要执行的css样式 和 最终值
        @param  function    callback    运动结束触发的回调函数  默认值是空函数
        
        指定标签对象 css样式的改变 是 通过定时器 累加步长 逐步完成的改变
        可以兼容透明度 可以兼容多属性同时运动
        不能兼容颜色 不能设定运动的方式 不能设定运动的时间

*/
function move(element , styleObj , callback = function(){}){
    // 1, 定义变量 存储 定时器个数
    let num = 0 ;

    // 2, 循环遍历 参数2 
    // 参数2的属性是 要运动的 css样式的属性
    // 参数2的属性值是 要运动的 css样式的最终值
    // 循环变量 必须使用 let 定义
    for( let style in styleObj ){
        // 2-1 变量++ 也就是定时器个数累加1
        num++ ;

        // 2-2 获取初始值 兼容透明度
        let oldVal = style === 'opacity' ? window.getComputedStyle( element )[style] * 100 : parseInt( window.getComputedStyle( element )[style] );

        // 2-3 获取最终只 兼容透明度
        let endVal = style === 'opacity' ? styleObj[style] * 100 : styleObj[style] ;

        // 2-4 触发定时器
        let time = setInterval( function(){
            // 2-4-1  计算步长
            let step = ( endVal - oldVal ) / 10 ;

            // 2-4-2  步长取整
            step = step > 0 ? Math.ceil( step ) :  Math.floor( step );

            // 2-4-3  初始值累加步长值
            oldVal += step ;

            // 2-4-4  将累加之后的新数值 赋值给标签对象的css样式
            // 兼容透明度
            element.style[style] = style === 'opacity' ?  oldVal / 100 : oldVal + 'px' ;

            // 2-4-5  判断 初始值 是不是 累加到了 最终值
            if( oldVal === endVal ){
                // 清除定时器
                clearInterval( time );

                // 变量储存定时器个数--
                num--;

                // 判断 如果 num 是 初始值 
                // 证明 所有定时器 都清除了 也就是 运动都停止了
                // 触发回调函数
                if( num === 0 ){
                    callback();
                }
            }

        } , 30 )

    }
}


/*
    1,  定义变量 存储 定时器个数
    2,  循环遍历 参数2对象
        2-1 变量++
        2-2 获取初始值 兼容透明度
        2-3 获取最终值 兼容透明度
        2-4 定义 定时器
            2-4-1   计算步长
            2-4-2   步长取整
            2-4-3   初始值 累加 步长值
            2-4-4   标签css样式赋值新属性值 兼容透明度
            2-4-5   判断 初始值 是不是累加到 最终值
                如果 累加至 最终值 
                    清除定时器
                    变量--
                    变量如果是 初始值
                        调用 参数3 的 回调函数




*/